<template>
  <div class="login_container">
    <div class="header_box">
      <!-- <img class="logo" src="../assets/imgs/logo.png" alt="" /> -->
      <div class="titlt_box">
        <div class="title">抽灌实验实时监测系统</div>
      </div>
      <div class="login-box">
        <img class="loginbgi" src="../assets/imgs/loginbgi.png" alt="" />
        <div class="box flex-a-c">
          <img class="user" src="../assets/imgs/pwduser.png" alt="" />
          <div class="login">
            <span>账号：</span><input v-model.trim="username" type="text" />
          </div>
          <div class="login">
            <span>密码：</span><input v-model.trim="password" type="password" />
          </div>
          <img
            class="loginBtn"
            @click="login"
            src="../assets/imgs/loginbtn.png"
            alt=""
          />
        </div>
      </div>
    </div>
    <div class="pro-box" v-if="showProlist">
      <!-- <p>项目选择</p> -->
      <div class="pro-list flex-b-r">
        <div
          class="item flex-a-c"
          v-for="(item, i) in proList"
          :key="i"
          @click="chosePro(item)"
        >
          <img class="icimg" src="../assets/imgs/proimg.png" alt="" />
          <p>{{ item.name }}</p>
        </div>
        <!-- <div class="item flex-a-c" v-for="i in 15" :key="i">
          <img class="icimg" src="../assets/imgs/proimg.png" alt="" />
          <p>南阳中心新医院</p>
        </div> -->
      </div>
    </div>
  </div>
</template>

<script>
import { login } from '../untils/api'
export default {
  // 组件名称
  name: 'Login',
  // 组件参数 接收来自父组件的数据
  props: {},
  // 局部注册的组件
  components: {},
  // 组件状态值
  data () {
    return {
      username: '',//admin
      password: '',//123456
      proList: null,
      showProlist: false,
    }
  },
  // 组件初始化
  created () {
  },
  // 组件实例挂载完毕
  mounted () {
  },
  // 组件方法
  methods: {
    async login () {
      //   console.log(123, this.username, this.password)
      const res = await login({ username: this.username, password: this.password })
      if (res.code != 200) {
        this.$message.info('账户名或密码错误！')
      } else {
        if (res.result.sysUser.status == 2) return this.$message.info('该用户暂不允许登录！')
        if (res.result.wellProjectList.length == 0) return this.$message.info('该用户暂未分配项目！')
        sessionStorage.setItem('userId', res.result.userId)
        sessionStorage.setItem('token', res.result.token)
        sessionStorage.setItem('rw', res.result.sysUser.rw)
        this.proList = res.result.wellProjectList
        // console.log(this.proList)
        if (this.proList.length > 1) {
          this.showProlist = true
        } else {
          var wellList = res.result.wellProjectList[0].wellInfoList
          var wellId = this.choseWellId(wellList)
          sessionStorage.setItem('wellId', wellId)
          sessionStorage.setItem('proId', this.proList[0].id)
          if (wellList.length == 0) return this.$message.info('该项目下未检测到水井编号！')
          // sessionStorage.setItem('userId', wellId)
          this.$router.push('/')
        }
      }
    },
    chosePro (item) {
      // this.choseWellId(item.wellInfoList)
      var wellId = this.choseWellId(item.wellInfoList)
      if (wellId.type == 'info') return
      var proId = item.id
      sessionStorage.setItem('wellId', wellId)
      sessionStorage.setItem('proId', proId)
      this.$router.push('/')
    },
    choseWellId (wellList) {
      var flag = false
      if (wellList.length == 0) return this.$message.info('该项目下未检测到水井编号')
      for (var i = 0; i < wellList.length; i++) {
        if (wellList[i].status == 2) {
          flag = true
          var wellId = wellList[i].id
          //   sessionStorage.setItem('wellId', wellList[i].id)
        }
      }
      // 1666484056000
      // 1666484074000
      // 1666484086000
      // 1672218988000
      // 1672630927000
      if (!flag) {
        var wellId = wellList[wellList.length - 1].id

      }
      return wellId

    },
    timeToTimestamp (time) {
      let timestamp = Date.parse(new Date(time).toString());
      //timestamp = timestamp / 1000; //时间戳为13位需除1000，时间戳为13位的话不需除1000
      // console.log(time + "的时间戳为：" + timestamp);
      return timestamp;
    }
  }
}
</script>

<style scoped lang='less'>
.login_container {
  height: 100%;
  width: 100%;
  display: block;
  min-width: 800px;
  background-image: url(../assets/imgs/loginimg.png);
  background-size: cover;
  background-size: 100% 100%;
  position: relative;
  .header_box {
    height: 10%;
    width: 6.697917rem /* 1286/192 */;
    background-image: url(../assets/imgs/headerimg.png);
    background-size: cover;
    background-size: 100% 100%;
    min-height: 0.416667rem /* 80/192 */;
    display: flex;
    justify-content: space-between;
    // text-align: center;
    // background-color: red;
    margin: 0 auto;
    .titlt_box {
      height: 58%;
      line-height: 0.3125rem /* 60/192 */;
      width: 1.979167rem /* 380/192 */;
      margin: 0 auto;
      padding-top: 0.010417rem /* 2/192 */;
      box-sizing: border-box;

      .title {
        font-size: 0.166667rem /* 32/192 */;
        font-family: SimHei;
        text-align: center;
        // font-weight: 400;
        color: #5df5f9;
      }
    }
  }
  .login-box {
    width: 7.03125rem /* 1350/192 */;
    height: 4.166667rem /* 800/192 */;
    position: absolute;
    top: 0.520833rem /* 100/192 */;
    left: 1.041667rem /* 200/192 */;
    // background-color: #fff;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.135417rem /* 26/192 */;
    color: white;
    .loginbgi {
      width: 4.6875rem /* 900/192 */;
      height: 3.125rem /* 600/192 */;
    }
    .box {
      width: 1.822917rem /* 350/192 */;
      height: 2.604167rem /* 500/192 */;
      display: flex;
      justify-content: space-around;
      flex-direction: column;
      align-items: center;
      background-image: url(../assets/imgs/loginbox.png);
      background-size: cover;
      background-size: 100% 100%;
      .user {
        width: 0.625rem /* 120/192 */;
        height: 0.625rem /* 120/192 */;
      }
      .login {
        width: 1.302083rem /* 250/192 */;
        height: 0.182292rem /* 35/192 */;
        line-height: 0.182292rem /* 35/192 */;
        span {
          font-weight: 500;
        }
        input {
          width: 0.78125rem /* 150/192 */;
          height: 0.145833rem /* 28/192 */;
          // margin-top: 0.015625rem /* 3/192 */;
          //   text-align: center;
          // margin-bottom: 0.104167rem /* 20/192 */;
          font-size: 0.104167rem /* 20/192 */;
          // background: #70bfe6;
          outline: none;
          border: 0.005208rem /* 1/192 */ solid #014df8;
          border-radius: 0.052083rem /* 10/192 */;
          background-color: transparent;
          color: white;
          padding-left: 0.052083rem /* 10/192 */;
          &:focus {
            outline: none;
          }
        }
      }
      .loginBtn {
        width: 0.677083rem /* 130/192 */;
        height: 0.3125rem /* 60/192 */;
        &:hover {
          cursor: pointer;
        }
      }
    }
  }
  .pro-box {
    width: 6.770833rem /* 1300/192 */;
    height: 3.125rem /* 600/192 */;
    // background-color: pink;
    position: absolute;
    top: 1.041667rem /* 200/192 */;
    left: 1.5625rem /* 300/192 */;
    padding: 0.104167rem /* 20/192 */;
    // background-color: rgb(221, 172, 139);
    background-image: url(../assets/imgs/probox.png);
    background-size: cover;
    background-size: 100% 100%;
    border-radius: 0.052083rem /* 10/192 */;
    display: flex;
    justify-content: flex-start;
    flex-direction: column;
    background-color: #0170b3;
    // opacity: 1;
    padding-top: 0.46875rem /* 90/192 */;
    box-sizing: border-box;

    p {
      font-size: 0.15625rem /* 30/192 */;
      text-align: center;
    }
    .pro-list {
      max-height: 2.864583rem /* 550/192 */;
      width: 100%;
      //   background-color: rgb(190, 129, 129);
      flex-wrap: wrap;
      justify-content: flex-start;
      overflow-y: scroll;
      //滚动条的宽度
      &::-webkit-scrollbar {
        width: 0px;
        height: 8px;
        background-color: #e4e4e4;
        border-radius: 6px;
      }
      //滚动条的滑块
      &::-webkit-scrollbar-thumb {
        background-color: #a1a3a9;
        border-radius: 6px;
      }
      .item {
        width: 2.083333rem /* 400/192 */;
        height: 0.78125rem /* 150/192 */;

        &:hover {
          cursor: default;
        }
        .icimg {
          width: 0.520833rem /* 100/192 */;
          height: 0.520833rem /* 100/192 */;
        }
        p {
          font-size: 0.09375rem /* 18/192 */;
          color: white;
        }
      }
    }
  }
}
</style>
